<template>
  <a-input
    v-model="value"
    placeholder="请选择"
    allow-clear
    class="input-modal"
    @clear.stop="handerClear"
    @search="select"
  >
    <template #append>
      <icon-more @click="select" />
    </template>
  </a-input>
  <modal
    v-if="visible"
    :width="'1000'"
    :title="props.title"
    @modal-close="modalClose"
  >
    <query-form
      :render-config="props.tableObj.renderConfig"
      :render-keys="renderKeys"
      @search="searchHandle"
      @reset="resetHandle"
    />
    <table-container
      v-model:columns="columns"
      :loading="isLoading"
      :all-columns="allColumns"
      @refresh="getData"
    >
      <a-table
        :columns="columns"
        :data="renderData"
        :loading="isLoading"
        :row-selection="{ type: 'radio' }"
        @select="selectRow"
      />
    </table-container>
  </modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { computed, reactive, ref, watch } from 'vue';
  import queryForm from '@/common/components/query-form/index.vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import modal from './modal.vue';

  const props = defineProps({
    value: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    valueName: {
      type: String,
      default: '',
    },
    labelName: {
      type: String,
      default: '',
    },
    queryKeys: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableObj: {
      type: Object,
      default: () => {
        return {
          api: '',
          columns: [],
          renderConfig: {},
        };
      },
    },
  });
  const renderKeys = ref<any>([]);
  const columns = computed(() => {
    return props.tableObj.columns;
  });
  const emit = defineEmits(['change', 'handerClear']);
  const visible = ref(false);
  const value = ref(props.value);
  watch(
    () => props.value,
    (n: string) => {
      if (!n) {
        value.value = n;
      }
    },
    { deep: true }
  );
  watch(
    () => props.queryKeys,
    (n: any) => {
      renderKeys.value.length = 0;
      if (n?.length > 0) {
        renderKeys.value = [...n];
      } else {
        renderKeys.value = [...props.tableObj.renderKeys];
      }
    },
    { deep: true, immediate: true }
  );
  const select = () => {
    visible.value = true;
  };
  const handerClear = () => {
    emit('handerClear');
  };
  const modalClose = () => {
    visible.value = false;
  };
  const selectRow = (keys: any, key: any, record: any) => {
    value.value = record[props.labelName];
    if (props.valueName.indexOf(',') > -1) {
      const names = props.valueName.split(',');
      const values: Array<string> = [];
      names.forEach((e) => {
        values.push(record[e]);
      });
      const valueName = values.join(',');
      emit('change', valueName);
    } else {
      emit('change', value.value);
    }
  };
  const searchHandle = (data: any) => {
    console.log('search', data);
  };
  const resetHandle = (data: any) => {
    console.log('resetHandle', data);
  };
  const allColumns = lodash.cloneDeep(columns);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);

  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        key: '1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com',
      },
      {
        key: '2',
        name: 'Alisa Ross',
        salary: 25000,
        address: '35 Park Road, London',
        email: 'alisa.ross@example.com',
      },
      {
        key: '3',
        name: 'Kevin Sandra',
        salary: 22000,
        address: '31 Park Road, London',
        email: 'kevin.sandra@example.com',
      },
      {
        key: '4',
        name: 'Ed Hellen',
        salary: 17000,
        address: '42 Park Road, London',
        email: 'ed.hellen@example.com',
      },
      {
        key: '5',
        name: 'William Smith',
        salary: 27000,
        address: '62 Park Road, London',
        email: 'william.smith@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };

  getData();
</script>

<style lang="less" scoped>
  .base-component {
    color: red;
  }
</style>
